<swal title="Delete?"
      [text]="'Client \'' + client?.clientId + '\' will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<p *ngIf="!client">Loading client data...</p>
<form class="needs-validation"
      *ngIf="client"
      [ngClass]="{ 'was-validated': form.submitted }"
      (ngSubmit)="form.form.valid && update()"
      novalidate
      #form="ngForm">
    <div class="form-group row">
        <label for="client-id"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="The unique identifier for this application.">
                info
            </i>
            Client Id
        </label>
        <div class="col-sm-10 col-form-label">
            <span class="col-form-label"
                  id="client-id"
                  name="client-id">
                {{ client.clientId }}
            </span>
        </div>
    </div>
    <div class="form-group row">
        <label for="client-display-name"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Application name that will be seen on consent screen.">
                info
            </i>
            Display Name (*)
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="client-display-name"
                   name="client-display-name"
                   [(ngModel)]="client.clientName"
                   maxlength="200"
                   required
                   #clientName="ngModel" />
            <div *ngIf="form.submitted && clientName.invalid"
                 class="form-control-feedback text-danger">
                Field 'Display Name' is required.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="client-description"
               class="col-sm-2 col-form-label">
            Description
        </label>
        <div class="col-sm-10">
            <textarea id="client-description"
                      name="client-description"
                      class="form-control"
                      rows="3"
                      maxlength="1000"
                      [(ngModel)]="client.description"
                      #description="ngModel">
            </textarea>
        </div>
    </div>
    <div class="form-group row">
        <label for="client-display-url"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Application URL that will be seen on consent screen.">
                info
            </i>
            Display URL
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="client-display-url"
                   name="client-display-url"
                   [(ngModel)]="client.clientUri"
                   maxlength="2000"
                   #clientUrl="ngModel" />
        </div>
    </div>
    <div class="form-group row">
        <label for="client-logo-url"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Application logo that will be seen on consent screen.">
                info
            </i>
            Logo URL
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="client-logo-url"
                   name="client-logo-url"
                   [(ngModel)]="client.logoUri"
                   maxlength="2000"
                   #logoUrl="ngModel" />
        </div>
    </div>
    <div class="form-group row">
        <label for="client-enabled"
               class="col-sm-2 col-form-label">
            Enabled
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="client-enabled"
                       name="client-enabled"
                       [(ngModel)]="client.enabled"
                       #enabled="ngModel" />
                <label class="custom-control-label"
                       for="client-enabled">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="client-require-consent"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Specifies whether a consent screen is required.">
                info
            </i>
            Require Consent
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="client-require-consent"
                       name="client-require-consent"
                       [(ngModel)]="client.requireConsent"
                       #requireConsent="ngModel" />
                <label class="custom-control-label"
                       for="client-require-consent">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="client-remember-consent"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Specifies whether consent screen is remembered after having been given.">
                info
            </i>
            Remember Consent
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="client-remember-consent"
                       name="client-remember-consent"
                       [(ngModel)]="client.allowRememberConsent"
                       #allowRememberonsent="ngModel" />
                <label class="custom-control-label"
                       for="client-remember-consent">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary m-r-5">
                Save Changes
            </button>
            <button type="button"
                    class="btn btn-danger m-r-5 float-right"
                    (click)="deleteAlert.fire()">
                Delete
            </button>
        </div>
    </div>
</form>